<template>
  <el-card>
    <my-bread level1="商品管理" level2="分类参数"></my-bread>
    <el-alert style="margin-top: 20px;" title="只允许第三级别分类设置参数" type="warning" center show-icon> </el-alert>
    <el-form label-position="left" label-width="80px" :model="form" style="margin-top: 20px;">
      <el-form-item label="商品分类">
        <el-cascader expand-trigger="hover" :show-all-levels="false" @change="changeCascader()" :options="options"
          :props="defaultProps" v-model="selectOptions"></el-cascader>
      </el-form-item>
    </el-form>
    <el-tabs v-model="active" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="1">
        <el-button type="danger">添加动态参数</el-button>
        <el-table :data="arrDyprams" style="width: 100%">
          <el-table-column label="#" type="expand" width="150px">
            <template slot-scope="props">
              <el-tag :key="tag" v-for="tag in props.row.attr_vals" closable :disable-transitions="false" @close="handleClose(props.row.attr_vals,props.row.attr_id,props.row.attr_name,tag)">
                {{tag}}
              </el-tag>
              <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                @keyup.enter.native="handleInputConfirm(props.row.attr_vals,props.row.attr_id,props.row.attr_name)" @blur="handleInputConfirm(props.row.attr_vals,props.row.attr_id,props.row.attr_name)">
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="attr_name" label="属性名称">
          </el-table-column>
          <el-table-column prop="mg_state" label="操作">
            <template slot-scope="scope">
              <el-button plain size="mini" type="primary" @click="dialogFormVisibleEditShow(scope.row)" icon="el-icon-edit"></el-button>
              <el-button plain size="mini" @click="showDeleteDialog(scope.row.id)" type="danger" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态参数" name="2">
        <el-button type="danger">添加动态参数</el-button>
        <el-table :data="arrStaticprams" style="width: 100%">
          <el-table-column type="index" label="#"  width="60px">
          </el-table-column>
          <el-table-column prop="attr_name" label="属性名称">
          </el-table-column>
          <el-table-column prop="attr_vals" label="属性值">
          </el-table-column>
          <el-table-column prop="mg_state" label="操作">
            <template slot-scope="scope">
              <el-button plain size="mini" type="primary" @click="dialogFormVisibleEditShow(scope.row)" icon="el-icon-edit"></el-button>
              <el-button plain size="mini" @click="showDeleteDialog(scope.row.id)" type="danger" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      selectOptions: [],
      dyParamList: [],
      form: {},
      options: [],
      defaultProps: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      },
      activeName: '',
      active: '1',
      arrDyprams: [],
      arrStaticprams: [],
      inputVisible: false,
      inputValue: ''
    }
  },
  created () {
    this.queryGoodCategory()
  },
  methods: {
    async  handleClick () {
      if (this.active === '1') {
        if (this.selectOptions.length === 3) {
          const res = await this.$http.get('categories/' + this.selectOptions[2] + '/attributes?sel=many')
          this.arrDyprams = res.data.data
          this.arrDyprams.forEach(item => {
            item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.trim().split(',')
          })
        }
      } else if (this.active === '2') {
        if (this.selectOptions.length === 3) {
          const res = await this.$http.get('categories/' + this.selectOptions[2] + '/attributes?sel=only')
          console.log(res)
          this.arrStaticprams = res.data.data
        }
      }
    },
    async queryGoodCategory () {
      const res = await this.$http.get('categories?type=3')
      this.options = res.data.data
    },
    async changeCascader () {
      if (this.active === '1') {
        if (this.selectOptions.length === 3) {
          const res = await this.$http.get('categories/' + this.selectOptions[2] + '/attributes?sel=many')
          this.arrDyprams = res.data.data
          this.arrDyprams.forEach(item => {
            item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.trim().split(',')
          })
        }
      } else if (this.active === '2') {
        if (this.selectOptions.length === 3) {
          const res = await this.$http.get('categories/' + this.selectOptions[2] + '/attributes?sel=only')
          console.log(res)
          this.arrStaticprams = res.data.data
        }
      }
    },
    async handleClose (attr_vals, attr_id, attr_name, tag) {
      attr_vals.splice(attr_vals.indexOf(tag), 1)
      let datas = {
        attr_name: attr_name,
        attr_sel: 'many',
        attr_vals: attr_vals.join(',')
      }
      const res = this.$http.put('categories/' + this.selectOptions[2] + '/attributes/' + attr_id, datas)
      console.log(res)
    },

    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm (attr_vals, attr_id, attr_name) {
      let inputValue = this.inputValue
      if (inputValue) {
        attr_vals.push(inputValue)
      }
      let datas = {
        attr_name: attr_name,
        attr_sel: 'many',
        attr_vals: attr_vals.join(',')
      }
      const res = this.$http.put('categories/' + this.selectOptions[2] + '/attributes/' + attr_id, datas)
      console.log(res)
      this.inputVisible = false
      this.inputValue = ''
    }

  }
}
</script>

<style>
</style>
